<!--
 * @Author: fengxx
 * @Date: 2025-09-05 09:19:27
 * @LastEditors: fengxx
 * @LastEditTime: 2025-09-22 16:12:02
-->
<script setup lang="ts">
import { computed, inject, onMounted, readonly, ref, useAttrs, watch, watchEffect } from 'vue'

// 接参方式1：数组
// const { welcome, aa } = defineProps(['welcome', 'aa'])
// 接参方式2：对象
// interface A {
//   a: string
// }
// const { foo = 'pp' } = defineProps<{
//   foo?: string
//   hh?: number
//   isTrue?: boolean
//   nums: number[]
//   obj?: A
// }>()

// 拒绝继承过来的内部属性等
// defineOptions({
//   inheritAttrs: false,
// })
// defineExpose
const attrs = useAttrs()

const { foo } = defineProps({
  // msg: String,
  pp: String,
  foo: {
    type: String,
    required: false,
    default: '100',
  },
  hh: {
    type: Number,
    required: false,
  },
  isTrue: {
    type: Boolean,
    required: true,
  },
  nums: {
    type: Array,
    required: false,
  },
  obj: {
    type: Object,
    required: false,
  },
})

// 定义该组件要触发的事件
const emit = defineEmits(['changeParent', 'submit'])
// const emit = defineEmits({
//   submit(payload: { email: string; password: string }) {
//     if (!!payload.email) {
//       return true
//     }

//     // return false
//     // 通过返回值为 `true` 还是为 `false` 来判断
//     // 验证是否通过
//   },
// })

// const emit = defineEmits<{
//   (e: 'changeParent', id: number, a: string): void
//   (e: 'update', value: string): void
// }>()

// foo2不随props.foo的变化而变化
// const foo2 = ref(foo)
// foo1随着props.foo的变化而变化
const foo1 = computed(() => {
  return foo
})

// const model = defineModel()
const title = defineModel('title')
const msg = defineModel('msg')
// const [model, modifiers] = defineModel({
//   set(value: string) {
//     console.log(value)
//     if (modifiers.capitalize) {
//       return value.charAt(0).toUpperCase() + value.slice(1)
//     }
//     return value
//   },
// })
//  defineModel('title', {
//   required: true,
//   type: String,
// })
// watch(
//   () => foo,
//   () => {
//     console.log(foo)
//   },
// )
// watchEffect(() => {
//   console.log(foo)
// })

interface InjectI {
  count11: number
  changeCount: () => void
}

// 注入者（通过提供的名称拿具体的值；第一个参数： 提供的名称，第二个参数：未提供内容时的默认值）
const rootMsg = inject<InjectI>('rootMsg')
// const root1 = inject('key')

const fun = () => {
  // root1.value = 5
  if (rootMsg) {
    // rootMsg.count11.value = 10
    // rootMsg.changeCount()
  }
  // emit('update', 'uuuuu')
  // emit('submit', { email: 'sdghgdfh', password: '' })
  emit('changeParent', 1, 'pp')
  // foo1.value = 'jkgfhfgh'
  // console.log(foo)
  // return props.foo
  // model.value = 'pp'
  // console.log(modifiers)
  title.value = 'title'
  console.log(attrs.class)
}

// onMounted(() => {
//   fun()
// })

// console.log(rootMsg.value)

// const inoutVal = ref(msg)
</script>
<template>
  <!-- <input type="text" v-model="msg" /> -->
  <div
    class="bb"
    style="border-radius: 8px"
    @click="
      () => {
        console.log('kkkk')
      }
    "
  >
    <div>ggggg{{ rootMsg?.count11 }}</div>
    <div v-if="$slots.aa" class="aaa">
      <slot name="aa" :my="1"><button>aa</button></slot>
    </div>
    <div @click="fun" :class="$attrs.class">kikikikikik</div>
    <slot name="bb" :my="1"><button>bb</button></slot>
    <div class="item" @click="$emit('changeParent', 1, 'pp')">
      <div>{{ foo }}{{ foo1 }}{{ title }}</div>
      <!-- <div>{{ welcome }}{{ aa }}</div> -->
      <!-- <i>
        <slot name="icon"></slot>
      </i> -->
      <div class="details" v-bind="$attrs">
        <h3>
          11
          <!-- <slot name="heading"></slot> -->
        </h3>
      </div>
      <slot :myText="true"><button>默认按钮</button></slot>
    </div>
  </div>
</template>

<style scoped>
.aaa {
  color: blueviolet;
}
.aa {
  color: red;
}
.bb {
  color: green;
}
.item {
  margin-top: 2rem;
  display: flex;
  position: relative;
}

.details {
  flex: 1;
  margin-left: 1rem;
}

i {
  display: flex;
  place-items: center;
  place-content: center;
  width: 32px;
  height: 32px;

  color: var(--color-text);
}

h3 {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  color: var(--color-heading);
}

@media (min-width: 1024px) {
  .item {
    margin-top: 0;
    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
  }

  i {
    top: calc(50% - 25px);
    left: -26px;
    position: absolute;
    border: 1px solid var(--color-border);
    background: var(--color-background);
    border-radius: 8px;
    width: 50px;
    height: 50px;
  }

  .item:before {
    content: ' ';
    border-left: 1px solid var(--color-border);
    position: absolute;
    left: 0;
    bottom: calc(50% + 25px);
    height: calc(50% - 25px);
  }

  .item:after {
    content: ' ';
    border-left: 1px solid var(--color-border);
    position: absolute;
    left: 0;
    top: calc(50% + 25px);
    height: calc(50% - 25px);
  }

  .item:first-of-type:before {
    display: none;
  }

  .item:last-of-type:after {
    display: none;
  }
}
</style>
